<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title th:text="${userName}+' 打卡'"></title>
    <style>
        .attend-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .table-header {
            background-color: #4CAF50;
            color: white;
        }

        .table-row:nth-child(even) {
            background-color: #f2f2f2;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
            height: 50px;
            font-size: 28px;
        }

        .pagination {
            width: 100%;
            position: relative;
            bottom: 0;
            gap: 30px;
        }

        .prev-button,
        .next-button {
            width: 85px;
            height: 40px;
            border-radius: 10px;
            background-color: skyblue;
            color: white;
            border: none;
            cursor: pointer;
        }

        .prev-button:hover,
        .next-button:hover {
            background-color: skyblue;
        }

        .month-selector {
            border: none;
            cursor: pointer;
            font-size: 28px;
        }


        /* 媒体查询：手机屏幕（最大宽度 600px） */
        @media only screen and (max-width: 600px) {
            th,
            td {
                font-size: 28px;
                padding: 4px;
            }

            .attend-table {
                width: 100%;
            }

            .pagination {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }

            .prev-button,
            .next-button {
                width: 100%;
                height: 30px;
            }
        }
    </style>
</head>

<body>

<div th:fragment="attendance">
    <h1 style="text-align: center;">用户：<span th:text="${userName}"></span></h1>
    <div>
        <form th:action="@{/app/getClockList}" method="get" id="clockList">
            <table class="attend-table">
                <tr class="table-header">
                    <!--                <th>ID</th>-->
                    <!--                <th>name</th>-->
                    <th>week</th>
                    <th>date</th>
                    <th>upTime</th>
                    <th>downTime</th>
                    <th>additionLength</th>
                </tr>
                <tr th:each="item : ${data.attendList.records}" class="table-row">
                    <!--                <td th:text="${item.id}"></td>-->
                    <!--                <td th:text="${item.name}"></td>-->
                    <td th:text="${item.week}"></td>
                    <td th:text="${item.currentDateTime}"></td>
                    <td th:text="${item.clockUpTime}"></td>
                    <td th:text="${item.clockDownTime}"></td>
                    <td th:text="${item.additionTimeStr}"></td>
                </tr>
            </table>
        </form>
        <div style="text-align: center">
            <form th:action="@{/app/clocktodo}" method="post" id="clockForm">
                <label>
                    <input type="text" id="userName" name="userName" th:value="${userName}" style="display: none;">
                    <input type="datetime-local" id="datetimeInput" name="clockTime"
                           style="width: 330px;height: 40px;border: 1px solid #ddd;padding: 8px; margin-top: 20px;margin-bottom: 20px;font-size: 28px;text-align: center;">
                </label>
                <br/>
                <label>
                    <button type="submit" id="submitBtn" th:text="${msg!=null?msg:'打卡'}"
                            style="height: 300px;width: 300px;border-radius: 50%;background-color: #2bde32;color: white;border: none;font-size: 50px">
                        打卡
                    </button>
                </label>
            </form>
        </div>
    </div>
    <h3 style="text-align: center; margin-top: 50px;">打卡记录</h3>
    <table class="attend-table">
        <tr class="table-header">
            <!--                <th>ID</th>-->
            <!--                <th>name</th>-->
            <th>clockTime</th>
            <th>osType</th>
            <th>desc</th>
        </tr>
        <tr th:each="item : ${attendHistoryList}" class="table-row">
            <!--                <td th:text="${item.id}"></td>-->
            <!--                <td th:text="${item.name}"></td>-->
            <td th:text="${#strings.substring(item.clockTime,11)}"></td>

            <td th:text="${item.osType}"></td>
            <td th:text="${item.remark}"></td>
        </tr>
    </table>
</div>

<script>
    var timerId = setInterval(function () {
        // 定时执行的代码
        var now = new Date();
        var year = now.getFullYear();
        var month = (now.getMonth() + 1).toString().padStart(2, '0');
        var day = now.getDate().toString().padStart(2, '0');
        var hours = now.getHours().toString().padStart(2, '0');
        var minutes = now.getMinutes().toString().padStart(2, '0');
        var seconds = now.getSeconds().toString().padStart(2, '0');

        var defaultValue = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
        document.getElementById('datetimeInput').value = defaultValue;
    }, 1000);

    //获取设备名
    function getDeviceName() {
        const userAgent = navigator.userAgent;
        let deviceName = "Unknown";

        if (/Android/i.test(userAgent)) {
            deviceName = "Android";
        } else if (/iPhone|iPad|iPod/i.test(userAgent)) {
            deviceName = "iOS";
        } else if (/Windows/i.test(userAgent)) {
            deviceName = "Windows";
        } else if (/Macintosh/i.test(userAgent)) {
            deviceName = "Mac";
        } else if (/Linux/i.test(userAgent)) {
            deviceName = "Linux";
        }
        return deviceName;
    }

    console.log(getDeviceName());

    // 获取提交按钮
    var submitBtn = document.getElementById('submitBtn');

    // 为提交按钮添加点击事件
    submitBtn.addEventListener('click', function (event) {
        event.preventDefault();  // 阻止表单默认提交行为

        // 显示确认弹窗
        var confirmResult = confirm('您指纹打卡了吗？');

        // 如果用户确认，提交表单
        if (confirmResult) {
            document.getElementById('clockForm').submit();
        }
    });

    function submitMonth() {
        document.getElementById('clockList').submit();
    }
</script>

</body>

</html>